<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				/* 统一高度300px保证美观 */
				width: 300px;
			}
		</style>
	</head>
	<body>
		<button id = "a">图片a</button>
		<button id = "b">图片b</button>
		<div>
			<img src="JS外联文件夹/a.png" alt="阿凡达">
		</div>
		<script>
			var picture1 = document.getElementById("a");
			var picture2 = document.getElementById("b");
			//事件操作
			var img = document.querySelector("img");//标记img
			picture1.onclick = function(){
				img.src = "JS外联文件夹/a.png";
				img.title = "me";
			}
			picture2.onclick = function(){
				img.src = "JS外联文件夹/b.png";
				img.title = "还是me";
			}
		</script>
		
		<!-- 改变内容element.innerText -->
		<!-- innerText不识别HTML标签 -->
		<div>
			<p id = "1">点我查看今年的时间</p>
			<strong id = "2">1</strong>
		</div>
		<script>
			var p1 = document.querySelector("p");
			p1.onclick = function(){//点击更改内容函数
				p1.innerText = "<p>今年是2022年(P标签名仍旧存在)</p>";//改变文档,但innerText不识别标记
			}
			var p2 = document.querySelector("strong");
			p2.onclick = function(){
				p2.innerHTML = "<p>此文本通过js脚本更改(P标签名不存在)</p>";//改变文档,但innerText不识别标记
			}
		</script>
		
		<button>按钮</button>
		<input type="text" value="输入内容" >
		<script>
			
		</script>
	</body>
</html>